<template>
	<view class="content">
		<!-- 轮播图组件，展示广告或推荐内容 -->
		<uni-swiper-dot class="uni-swiper-dot-box" field="content">
			<swiper class="swiper-box">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image style="width: 100%; height: 180px;
						 background-color: #eeeeee;" mode="aspectFill" :src="item.imageUrl"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view>
			<!-- 日期选择器 -->
			<view style="margin-top: 10px; border-radius: 5px;
			padding: 10px; margin: 10px;
			background-color: #d7d7d7; height: 40px;">
				<uni-datetime-picker v-model="times" type="daterange" />
			</view>

			<!-- 服务选项选择 -->
			<view style="padding: 0px 10px;">
				<uni-data-checkbox v-model="hobby" multiple :localdata="hobbys" />
			</view>

			<!--      预约按钮-->
			<view @click="toreservation()" style="padding: 20px 10px;">
				<button type="primary">立即预约租车</button>
			</view>
		</view>

		<!-- 品牌相关图片区域 -->
		<view style="margin: 0px 10px; margin-bottom: 20px;">
			<image @click="toUrl('/pages/index/xinren')" style="width: 100%; height: 180px;"
				src="/static/images/01.png"></image>
		</view>
		<view style="margin: 0px 10px; margin-bottom: 20px;">
			<image @click="toUrl('/pages/index/baozhang')" style="width: 100%; height: 180px;"
				src="/static/images/02.png"></image>
		</view>

		<!-- 自定义富文本内容 -->
		<rich-text class="detail" :nodes="customWebSite.alipayHome"></rich-text>
		<!-- <button @click="toUrl('/pages/empower/index?orderSn=S202311131134139780')">免押操作</button> -->
	</view>
</template>
<script>
	// import customConfig from '@/custom-config.js'
	export default {
		data() {
			return {
				title: '',
				customInfo: {}, // 存储自定义配置信息
				customWebSite: {}, // 存储网站相关配置信息
				banner: [], // 轮播图数据
				hobby: [0], // 默认选择的服务选项（芝麻免押金）
				times: [], // 选择的日期范围
				hobbys: [{ // 服务选项列表
					text: '芝麻免押金',
					value: 0
				}, {
					text: '送车上门',
					value: 1
				}]
			}
		},
		// 页面显示时加载数据
		onShow() {
			this.getCustom()
		},
		methods: {
			// 处理预约按钮点击事件
			toreservation() {
				// uni.navigateTo({
				// 	url:'/pages/empower/index?orderSn=FJS202312291416059815'
				// })
				if (!this.times.length) {
					uni.showToast({
						title: '请选择预约用车时间',
						icon: 'error'
					})
					return;
				}
				// 跳转到预约页面并传递选择的服务选项和日期
				uni.navigateTo({
					url: '/pages/order/reservation?hobby=' + this.hobby.toString() + '&times=' + this
						.times
						.toString()
				})
			},
			// 获取首页轮播图数据
			getHome() {
				var _this = this;
				uni.showLoading({
					title: '加载中'
				})
				// 发送HTTP请求获取轮播图数据
				_this.$httpSend({
					path: '/api/v1/alipay/home/index',
					complete() {},
					success: (res) => {
						_this.banner = res.banner
					}
				});
			},

			// 通用页面跳转方法
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 获取自定义配置信息
			getCustom() {
				var _this = this;
				uni.showLoading({
					title: '加载中'
				})

				// 发送HTTP请求获取自定义配置信息
				_this.$httpSend({
					path: '/api/v1/alipay/Custom/getInfo',
					success: (data) => {
						_this.customInfo = data.info
						_this.customWebSite = data.webSite
						// 存储配置信息到本地缓存
						uni.setStorageSync('customInfo', data.info)
						uni.setStorageSync('customWebSite', data.webSite)

						// 设置导航栏标题
						uni.setNavigationBarTitle({
							title: data.info.name
						})
						// 获取首页轮播图数据
						_this.getHome();
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		/* 		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper-box {
		height: 180px;
	}

	.uni-swiper-dot-box {
		width: 100%;
		margin: 0 auto;
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
</style>